<%@page import="cn.hutool.core.date.LocalDateTimeUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>${sessionScope.user.name }的订单中心</title>
	<base href="${pageContext.request.contextPath }/">
	<link id="favicon" rel="shortcut icon" href="favicon.ico" type="image/svg+xml">
    <link rel="stylesheet" type="text/css" href="css/common/commonutils.css">
    <link rel="stylesheet" type="text/css" href="css/index/head.css">
    <link rel="stylesheet" type="text/css" href="css/order/order.css">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <% int year = LocalDateTimeUtil.now().getYear(); request.setAttribute("year", year);%>
</head>
<body>
 <!-- 头部内容 -->
    <div id="head">
        <!-- 最上方的导航栏 -->
        <div id="navigation">
            <ul>
                <c:if test="${empty sessionScope.user }">
                	<li style="margin-right: 30px;">您好，请先登录~</li>
                </c:if>
                <c:if test="${not empty sessionScope.user }">              
                	<li style="margin-right: 30px;">欢迎您，${sessionScope.user.name }</li>
                </c:if>
                <li>当前所在地：地球村</li>
            </ul>
            
            <ul>
                <li>
                    <i id="shoping_cart_logo"></i>
                    <a href="shoppingcart">购物车</a>
                   <b class="shoping_cart_num">${sessionScope.shoppingNum}</b>
                </li>
                <li>|</li>
                <li><a href="orders">我的订单</a></li>
                <li>|</li>
                <li id="my_home"><a href="">我的钱包</a><i>您的余额:${sessionScope.user.balance }</i></li>
                <li>|</li>
                <c:if test="${empty sessionScope.user }">
                	<li><a href="login">登录</a></li>
                </c:if>
                <c:if test="${not empty sessionScope.user }">
                	<li><a href="exit">注销</a></li>
                </c:if>
                <li>|</li>
                <li><a href="register">注册</a></li>
            </ul>
        </div>
    </div>
    <!-- logo图片和搜索框 -->
    <div id="logo_line">
            <a href=""><img id="logo" src="images/uugai.com_1604756139381.png" /></a>
        <div id="search">
            <form>
                <input type="text" />
                <input type="submit" value="" />
            </form>
            <div id="searchbottom">
               	热搜:
                <a href="#">安徒生童话</a>
                <a href="#">三体</a>
                <a href="#">python</a>
            </div>
        </div>
        <!-- 设置购物车和订单 -->
        <div id="cart_order">
            <div id="lib_cart">
                <a href="shoppingcart">
                    <i class="cart_logo"></i>
                   	 购物车
                    <b class="shoping_cart_num">
                    <c:if test="${empty sessionScope.shoppingNum}">0</c:if>
                    <c:if test="${not empty sessionScope.shoppingNum}">${sessionScope.shoppingNum}</c:if>
                    </b>
                </a>
            </div>
            <div id="lib_order">
                <a href="orders">
                    <i id="cart_logo"></i>
                    	我的订单
                </a>
            </div>
        </div>
    </div>
    <!-- 菜单栏 -->
    <div id="menu">
        <ul>
            <li>全部分类</li>
            <!-- 拿到前面八个分类名 -->
            <c:forEach items="${requestScope.categoryByCLevel }" var="category" begin="0" end="7">           		
            		<li><a href="category/${category.id }">${category.name }</a></li>
            </c:forEach>
        </ul>
    </div>
    <!-- 来张图片 -->
  	<div><img src=""/></div>
  	<!-- 内容区 -->
  	<div id="order_box">
  		<!-- 左边的选项卡 -->
  		<div id="order_box_left">
  			<p>个人中心</p>
  			<div>
	  			<p>我的交易</p>
	  			<p class="active">我的订单</p>
  			</div>
  		</div>
  		<!-- 右边的详细信息 -->
  		<div id="order_box_right">
  			<div><p class="active">全部订单</p><p>待付款</p><p>待评价</p><i></i></div>
  			<div>
  				<ul>
  					<li>30天内</li>
  					<li>90天内</li>
  					<li>${year}年内</li>
  					<li>${year-1}年内</li>
  					<li>更早订单</li>
  				</ul>
  				<ul id="screen_click">
  					<p>下单时间</p>
  					<li><a href="javascript:void(0)" class="active"></a></li>
  					<li><a href="javascript:void(0)"></a></li>
  					<li><a href="javascript:void(0)"></a></li>
  					<li><a href="javascript:void(0)"></a></li>
  					<li><a href="javascript:void(0)"></a></li>
  				</ul>
  			</div>
  			
  			<div id="orders">
  				<div>
  					<p>订单详情</p>
  					<p>订单状态</p>
  					<p>订单操作</p>
  				</div>
  				<c:forEach items="${requestScope.orders }" var="order">
  				<div class="order">
  					<div>
	  					<p>订单号：<span>${order.id }</span></p>
	  					<p>| <fmt:formatDate type="both" value="${order.createTime }"/> |</p>
	  					<p>￥ ${order.price }</p>
	  					<p>| 网络支付</p>
	  					<p>| ${order.userName }</p>
  					</div>
  					<div class="order_item">
	  					<div class="order_books">
		  					<c:forEach items="${order.books }" var="book">
		  					<a href="book/${book.id }"><img src="${book.image }"/></a>
		  					</c:forEach>
	  					</div>
	  					
	  					<p>${order.paymentStatus eq true?"已支付":"未支付"}</p>
  						<div>
  							<c:if test="${order.paymentStatus eq false}">
  							<p class="order_clock_time"><fmt:formatDate type="time" value="${order.createTime }" /></p>
  							<p class="topay_order">支付</p>
  							</c:if>
  							<p><a class="delete_order" href="javascript:void(0)">删除订单</a></p>
  							<c:if test="${order.commentStatus eq false}">
  								<p class="to_order_comment"><a href="javascript:void(0)">去评论</a></p>
  							</c:if>
  							<c:if test="${order.commentStatus eq true}">
  								<p>已评论</p>
  							</c:if>
  						</div>
  					</div>
  				</div>
  				</c:forEach>
  		</div>
  	</div>
  	</div>
  	<script type="text/javascript" src="js/commons.js"></script>
  	<script type="text/javascript" src="js/user/myhome.js"></script>
</body>
</html>